<!DOCTYPE html>
<html>
  <head>
    <% include global/meta.html %>
    <% include global/top-css.html %>
    <title>yuscms</title>
</head>
  <body>

        <main class="main" data-info="<%=admin.permission%>">
          <div class="ys-admin-pos c-a1a3aa">
            首页<span class="f-sum">></span><span class="c-565b6d">栏目管理</span>
          </div>
          <div class="ys-admin-tablist">
              <div class="ys-admin-tab-header row justify-content-b">
                  <p class="f-14 c-565b6d pl-8 pt-6">栏目列表</p>
                  <div>
                      <a href="/admin/category/add" class="btn-add"><i class="ico ico-plus f-16 pos-r">+</i>栏目</a>
                      <a href="/admin/category/page-add" class="btn-add"><i class="ico ico-plus f-16 pos-r">+</i>单页</a>
                  </div>
              </div>
      
              <div class="mr-10 ml-10" v-loading="loading">
              <div class="table table-hover ml-10">
                    <div class="table-th row"> 
                      <div class="col-2">编号</div>
                      <div class="col-7">名称</div>
                      <div class="col-7">栏目类型</div>
                      <div class="col-3">排序</div>
                      <div class="flex">操作</div>
                    </div>
                   
                    <div class="table-border" >
                      <tree :list="list" @fuji="getData"></tree>
                    </div>
              </div>
      
              </div>
          </div>
        </main>
     
	<% include global/all-js.html %>
	<script>
    Vue.component("tree", {
    template: `
            <div>
                <template v-for="(item,index) in list">
                    <div class="row tr">
                        <div class="col-2 td">{{item.id}}</div>
                        <div class="col-7 td" v-if="item.pid!=0">{{'&nbsp;&nbsp;'.repeat(item.level)}}|-{{item.nav_name}}</div>
                        <div class="col-7 td" v-else>{{item.nav_name}}</div>
                        <div class="col-7 td">{{item.type==1?'栏目':'单页'}}</div>
                        <div class="col-3 td">{{item.sort}}</div>
                        <div class="flex td" v-if="item.type==1">
                            <a :href="'/admin/category/edit?id='+item.id"><i class="ico ico-edit mr-10 pos-r t-4"></i></a>
                            <a href="javascript:;" @click="isDel(item.id)"><i class="ico ico-del pos-r t-4"></i></a>
                        </div>
                        <div class="flex td" v-if="item.type==2">
                            <a :href="'/admin/category/page-edit?id='+item.id"><i class="ico ico-edit mr-10 pos-r t-4"></i></a>
                            <a href="javascript:;" @click="delPage(item.id)"><i class="ico ico-del pos-r t-4"></i></a>
                        </div>
                    </div>
                    <template v-if="item.children">
                        <tree :list="item.children" :index="index" @fuji="getData"></tree>
                    </template>
                </template>
            </div>
        `,
  props: ["list"],
  data: function() {
    return {
      open: false
    };
  },
  methods: {
    getData() {
      this.$emit("fuji");
    },

    toggle: function() {
      this.open = !this.open;
    },

    isDel(id) {
      let _this = this;
      if (!hasPermission("2")) {
        tipsWarn(_this, "对不起,您没有操作权限^_^");
        return;
      }
      axios
        .get("/api/admin/category/isDel", {
          params: { id: id }
        })
        .then(data => {
          let filterData = data.data;

          if (filterData.success) {
            if (
              filterData.data.length == 0 &&
              filterData.dataArticle.length == 0
            ) {
              _this.del(id);
            } else {
              tipsWarn(_this, "有子栏目或栏目下有文章，不能删除");
            }
          }
        })
        .catch(error => {
          console.error(error);
        });
    },

    del(id) {
      let _this = this;
      axios
        .get("/api/admin/category/del", {
          params: { id: id }
        })
        .then(data => {
          let filterData = data.data;
          if (filterData.success && filterData.data.affectedRows === 1) {
            _this.$emit("fuji");
            tips(_this, "删除成功！");
          }
        })
        .catch(error => {
          console.error(error);
        });
    },

    delPage(id) {
      let _this = this;
      if (!hasPermission("2")) {
        tipsWarn(_this, "对不起,您没有操作权限^_^");
        return;
      }
      axios
        .get("/api/admin/category/del-page", {
          params: { id: id }
        })
        .then(data => {
          let filterData = data.data;
          if (filterData.success && filterData.data.affectedRows === 1) {
            _this.$emit("fuji");
            _this.tips("删除成功！");
          }
        })
        .catch(error => {
          console.error(error);
        });
    }
  },
  computed: {}
});

		var vm = new Vue({
			el:'.main',
			data:{
        loading: true,
        list: [] //渲染页面的列表数据
			},
			methods:{
          
        getData() {
          var _this = this;
          axios
            .get("/api/admin/category")
            .then(data => {
              var filterData = data.data;
              if (filterData.success) {
                _this.list = filterData.data;
                _this.loading = false;
              } else {
                location.href = "/admin/login";
              }
            })
            .catch(error => {
              console.error(error);
            });
        }
			},
			watch: {
        list: {
          handler: function(val, oldval) {
          },
          deep: true
        }
      },
    
      created: function() {
        this.getData();
      },
    
			mounted:function(){
			},
			updated:function(){
			}
		});
	</script>	
	</body>
</html>
